<template>
	<view class="">
			<u-navbar title='查看装修师傅' :autoBack="true" bgColor="transparent"></u-navbar>
				<image src="https://renovationcdn.jiachuangnet.com/talentPool/bg6.png"
					style="width: 100%;height:363rpx;position: absolute;top:0;left:0;z-index: 10"></image>
				<view style="position: absolute;width:700rpx;left:25rpx;top:215rpx;z-index: 11;">
					<view class="content" v-if="talentList.length">
						<view v-for="(v,i) in talentList " :key="i" class="item">
							<u-image width="100rpx" height="100rpx" shape="circle" :src="'https://' + v.avatar" style=""></u-image>
							<view style="width: 530rpx;margin-left: 20rpx; ">
								<view style="display: flex;align-items: center;margin-bottom:20rpx;">
									<view style="font-weight: 700;font-size: 32rpx;min-width: 100rpx;">{{v.nickName}}</view>
									<view class="roleName" style="margin-left: 15rpx;">{{v.roleName}}</view>
									<view class="work">工作{{v.workYear}}年</view>
									<view class="age" style="margin-right: 10rpx;"> {{v.age}}岁</view>
									<u-icon name="arrow-right" size="18" color='#BEBEBE'></u-icon>
								</view>
								<view style="display: flex;justify-content: space-between;" v-if="loginType != 4 ">
									<view style="display: flex;align-items: center;" v-if="v.score!='0.0'">
										<view style="font-size: 26rpx;color:#454B4F;">评分:</view>
										<view><u-rate activeColor='#F79E1B' readonly allowHalf :value="v.score"></u-rate></view>
									</view>
									<view style="display: flex;align-items: center;" v-if="v.score=='0.0'&&loginType===3" @click="toScore(v)">
										<text  @click="toScore(v)"  style="font-size: 26rpx;color: #32b4c3;text-decoration: underline;">去评分</text>
									</view>
									<view style="display: flex;align-items: center;" v-if="v.score=='0.0'&&loginType!=3" >
										<view style="font-size: 26rpx;color:#454B4F;">暂未评分</view>
									</view>
									<view style="display: flex; align-items: center;">
										<image style="width: 20rpx;height: 28rpx;margin-right:10rpx;" src="https://renovationcdn.jiachuangnet.com/count.png"></image>
									     <text style="font-size: 26rpx;">已为<text :style="{'color':color,'margin':'0rpx 10rpx','fontWeight':'blod'}">{{v.orderNum}}</text>家店铺服务</text>
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;" v-else>
									<view style="display: flex; align-items: center;">
										<image style="width: 20rpx;height: 28rpx;margin-right:10rpx;" src="https://renovationcdn.jiachuangnet.com/count.png"></image>
									     <text style="font-size: 26rpx;">已为<text :style="{'color':color,'margin':'0rpx 10rpx','fontWeight':'blod'}">{{v.orderNum}}</text>家店铺服务</text>
									</view>
								</view>
							</view>
						</view>
						<!-- <view v-for="(v,i) in talentList" :key="i" class="item" >
							<view class="master_wrapper ">
								<view class="master_left" @click="toPath(v.userId)">
									<image :src="'https://'+v.avatar" mode="" style="width: 108rpx;height: 108rpx;border-radius: 50%;" ></image>
								</view>
								<view class="master_right">
									<view class="flex" style="padding: 11rpx 0;">
										<view class="flex" @click="toPath(v.userId)">
											<text class="name">{{v.nickName}}</text>
											<text class="post" style="padding-left: 20rpx;">{{v.roleName}}</text>
										</view>
										<u-icon name="order" @click="toScore(v)" color="#13989a" size="20" v-if="v.score==0"></u-icon>
										<view class="score" v-else>
											{{v.score}}分
										</view>
									</view>
									<view class="flex" style="padding: 11rpx 0;" @click="toPath(v.userId)">
										<view class="flex" style="justify-content: start;vertical-align: middle;">
											<u-icon name="phone-fill" color="#f79e1b" ></u-icon>
											<text class="phone text" style="padding-right: 25rpx;"  size="20">电话:{{v.phoneNumber}}</text>
										</view>
									</view>
									<view class="introduce" style="padding: 11rpx 0;" @click="toPath(v.userId)">
										{{v.introduction}}
									</view>
								</view>
							</view>
						</view> -->
					</view>
					<view style="width: 100%;height: 50vh;" v-if="talentList.length===0">
						<u-empty
						        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
								width="100%"
								height="100%"
								text="数据为空"
						>
						</u-empty>
					</view>
				</view>
				<u-popup :show="scoreShow " mode="bottom" round="10" @close='close' closeable closeOnClickOverlay>
					<view style='padding:50rpx 30rpx'>
						<view>请您对 <text style="margin:0 20rpx;color:#4a4a4a" >{{toScoreObj.nickName}}</text>师傅的工作进行评分</view>
						<view style="margin: 20rpx auto;color:#c9c9c9;font-size: 24rpx;" class="flex bewteen alignItem">
							<view>非常不满意</view>
							<view>非常满意</view>
						</view>
						<view class="flex alignItem bewteen" >
							<view class="flex">
								<u-icon name="star-fill" :color="v?'#F79E1B':'#fcd8a4'" size="24" v-for="(v,i) in starAll" :key="i" @click="scoreHandler(i)"></u-icon>
							</view>
						</view>
						<view style="border:1rpx solid #eee;box-sizing: border-box;margin:30rpx 0;">
						</view>
						<u-button  type="primary" shape="circle"  @click="updateTalentScore">提交</u-button>
					</view>
				</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				color: '#c7ccd3',
				pageNumber:1,
				pageSize:10,
				talentList:[],
				assignTaskId:0,
				loginType:null,
				scoreShow:false,
				toScoreObj:{
					
				},
				starAll:[0,0,0,0,0],
				score:0
			}
		},
		onLoad(query) {
			this.assignTaskId= query.assignTaskId
			this.getRoleListByAssignTaskId()
		},
		onShow() {
			this.loginType= uni.getStorageSync('loginType')
		},
		methods: {
			close(){
				this.scoreShow=false
				this.toScoreObj={}
				this.starAll=[0,0,0,0,0]
				this.score=0
			},
			updateTalentScore(){
				if(this.score==0){
					return uni.$u.toast('请打分:)');
				}
				uni.showModal({
					title: '提示:',
					content: '提交后不允许修改，确认提交？',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/talent/updateTalentScore', {
								assignTaskId:this.assignTaskId,
								score:this.score,
								userId:this.toScoreObj.userId
							}).then(res=>{
								if(res){
									uni.$u.toast('打分成功!');
									this.getRoleListByAssignTaskId()
									this.scoreShow=false
									this.toScoreObj={}
									this.score=0
									this.starAll=[0,0,0,0,0]
								}
							})
							
						} else if (res.cancel) {
							uni.$u.toast('取消提交 :)');
					
						}
				
					}
				})
				
			},
			scoreHandler(i){
				this.starAll= this.starAll.map((item,index)=>{
					if(index<=i) return 1
					return 0
				})
				this.score=i+1
			},
			toScore(obj){
				this.toScoreObj=obj
				this.scoreShow=true
			},
			toPath(id){
				uni.navigateTo({
					url:`/pages/talentDetails/index?userId=${id}`
				})
			},
			getRoleListByAssignTaskId(){
				uni.$u.http.get('/assign/getWorkerDetail',{
					params:{
						assignTaskId:this.assignTaskId
					}
				}).then(res=>{
					if(res){
						this.talentList=res
					}
				})
			}
		}
	}
</script>

<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.border {
		border: 1rpx solid #eee;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.content {
		width: 700rpx;
		margin: 0 auto;
		font-size: 28rpx;
	}
	.score{
			font-weight: bold;
			font-size: 28rpx;
			color: #ED115E;
			margin-left: 20rpx;
		}
	.item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		color: #999;
		width: 180rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.val {
		color: #333;
		font-size: 28rpx;
		max-width: 70%;
	}

	.master_wrapper{
		display: flex;
		padding: 10rpx 11rpx;
		.master_left{
			flex:1;
			margin-top: 11rpx;
		}
		.master_right{
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #1E272E;
			}
			width: 560rpx;
			padding-left: 16rpx;
			.name{
				font-weight: bold;
				font-size: 30rpx;
				color: #1E272E;
			}
			.post{
				font-weight: 500;
				font-size: 26rpx;
				color: #1E272E;
			}
			.verity{
				width: 86rpx;
				line-height: 38rpx;
				background: #13989A;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.introduce{
				font-weight: 500;
				font-size: 26rpx;
				color: #8A8A8A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
	
	.item {
		background: #FFFFFF;
		width: 650rpx;
		margin-bottom:20rpx;
		padding:25rpx;
		border-radius: 20rpx;
		display:flex;
		align-items:center;
	}
	.roleName,.age,.work{
		background: #FFEEEB;
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		color: #FF6D52;
		font-weight: 500;
		width: 122rpx;
		height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.age{
		background: #FFF5EA;;
		color: #FCB136;
	}
	.work{
		background-color: #EAF4FE;
		color: #39A7F8;
		margin:0 10rpx;
	}
</style>